<!--  -->
<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="">
      <titleLine title="查询条件(点击可展开更多或收起)"></titleLine>
      <a-form>
        <a-row :gutter="queryGutter">
          <a-col
            :xs="querySpan.xs"
            :sm="querySpan.sm"
            :md="querySpan.md"
            :lg="querySpan.lg"
            :xl="querySpan.xl"
            :xxl="querySpan.xxl"
          >
            <a-form-item label="" :colon="false">
              <a-input
                placeholder="资源名称"
                allowClear
                v-model="queryParam.permissionName"
              />
            </a-form-item>
          </a-col>
          <a-col
            :xs="querySpan.xs"
            :sm="querySpan.sm"
            :md="querySpan.md"
            :lg="querySpan.lg"
            :xl="querySpan.xl"
            :xxl="querySpan.xxl"
          >
            <a-form-item label="" :colon="false">
              <a-input
                placeholder="资源编码"
                allowClear
                v-model="queryParam.permissionCode"
              />
            </a-form-item>
          </a-col>
          <a-col
            :xs="querySpan.xs"
            :sm="querySpan.sm"
            :md="querySpan.md"
            :lg="querySpan.lg"
            :xl="querySpan.xl"
            :xxl="querySpan.xxl"
          >
            <a-form-item label="" :colon="false">
              <aSelectTorF
                placeholder="状态正常"
                v-model="queryParam.useStatus"
                allowClear
              >
              </aSelectTorF>
            </a-form-item>
          </a-col>
          <a-col
            :xs="querySpan.xs"
            :sm="querySpan.sm"
            :md="querySpan.md"
            :lg="querySpan.lg"
            :xl="querySpan.xl"
            :xxl="querySpan.xxl"
          >
            <a-form-item label="" :colon="false">
              <a-select
                placeholder="请选择资源类型"
                v-model="queryParam.permissionType"
                allowClear
              >
                <a-select-option :value="0"> 目录 </a-select-option>
                <a-select-option :value="1"> 菜单 </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <div class="search-button">
            <a-button
              type="primary"
              icon="search"
              class="ml10"
              @click="getDataList(true)"
            >
              查询
            </a-button>
            <a-button class="ml10" type="primary" @click="reset">重置</a-button>
          </div>
        </a-row>
      </a-form>
    </div>
    <!-- 表格区域 -->
    <div class="">
      <titleLine title="查询结果" :isBgColor="false">
        <aButtonPermission
          icon="plus"
          slot="button"
          @buttonEvent="add"
          labelName="添加资源"
          buttonCode="permission_add"
        >
        </aButtonPermission>
      </titleLine>
      <a-table
        :columns="columns"
        :data-source="dataSource"
        class="mt10"
        rowKey="id"
        :pagination="false"
        :scroll="{ x: 500, y: 800 }"
        :loading="tableLoading"
        @expand="expand"
        :expandedRowKeys.sync="expandedRowKeys"
        :indentSize="30"
      >
        <template slot="useStatus" slot-scope="text, record">
          <a-tag color="blue" v-if="record.useStatus === 0">启用</a-tag>
          <a-tag v-if="record.useStatus === 1">禁用</a-tag>
        </template>
        <span slot="action" slot-scope="record">
          <!-- <a class="" @click="edit(record)">编辑</a> -->
          <aLinkPermission
            labelName="编辑"
            buttonCode="permission_update"
            @buttonEvent="edit(record)"
          >
          </aLinkPermission>
          <!-- <a-divider type="vertical" /> -->
          <a-dropdown class="ml10">
            <a class="ant-dropdown-link"
              >更多
              <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item v-if="record.permissionType === 0">
                <!-- <a @click="add(record)">添加资源</a> -->
                <aLinkPermission
                  labelName="添加资源"
                  buttonCode="permission_add"
                  @buttonEvent="add(record)"
                >
                </aLinkPermission>
              </a-menu-item>
              <a-menu-item v-if="record.permissionType === 1">
                <aLinkPermission
                  labelName="权限设置"
                  buttonCode="permission_update"
                  @buttonEvent="permission(record)"
                >
                </aLinkPermission>
                <!-- <a @click="permission(record)">权限设置</a> -->
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm
                  title="确认删除吗？"
                  ok-text="确认"
                  cancel-text="取消"
                  @confirm="del(record)"
                >
                  <aLinkPermission
                    labelName="删除"
                    buttonCode="permission_delete"
                  ></aLinkPermission>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
      <pagination
        class="pagination"
        :pagination="ipagination"
        @paginationChange="paginationChange"
        @paginationShowSizeChange="paginationShowSizeChange"
      ></pagination>
    </div>
    <!-- 数据操作组件 -->
    <Modal @handleOk="handleOk" ref="Modal"></Modal>
    <!-- 右侧抽屉组件 -->
    <Drawer ref="Drawer"></Drawer>
  </a-card>
</template>

<script>
import { Mixins } from "@/mixins/list";
import Modal from "./component/Model";
import Drawer from "./component/Drawer";
import { columns } from "./component/save";
export default {
  name: "SysPermission",
  //import引入的组件需要注入到对象中才能使用
  components: {
    Modal,
    Drawer,
  },
  mixins: [Mixins],
  data() {
    //这里存放数据
    return {
      api: {
        dataList: "/admin_server/auth/permission/page",
        delete: "/admin_server/auth/permission/delete",
        listPermissionById: "/admin_server/auth/permission/listPermissionById",
      },
      tableLoading: false,
      columns,
      expandedRowKeys: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    permission(record) {
      this.$refs.Drawer.init(record.id, record.permissionName + "  - 权限列表");
    },
    /**
     * 展开
     */
    expand(expanded, record) {
      if (expanded) {
        this.tableLoading = true;
        this.$request
          .getRequest1(this.api.listPermissionById, { pid: record.id })
          .then((res) => {
            if (res.success) {
              this.filterDataSource(this.dataSource, record.id, res.result);
            }
            this.tableLoading = false;
          });
      }
    },
    /**
     * 递归设置展开列
     * @param {*} dataSource
     * @param {*} pid
     * @param {*} result
     */
    filterDataSource(dataSource, pid, result) {
      dataSource.forEach((x) => {
        if (x.children) {
          this.filterDataSource(x.children, pid, result);
        }
        if (x.id === pid) {
          x.children = result;
          x.children.forEach((y) => {
            // 如果是目录，设置可展开
            if (y.permissionType === 0) {
              y.children = [];
            }
          });
        }
      });
    },
    /**
     * 删除
     */
    del(record) {
      this.$request
        .getRequest1(this.api.delete, { id: record.id })
        .then((res) => {
          if (res.success) {
            this.$message.success("删除成功");
            this.getDataList();
          }
        });
    },
    /**
     * 编辑
     */
    edit(record) {
      this.$refs.Modal.init(
        record.id,
        null,
        record.permissionName + "  - 编辑资源"
      );
    },
    /**
     * 提交
     */
    handleOk() {
      this.$refs.Modal.handleCancel();
      this.getDataList();
    },
    /**
     * 添加
     */
    add(record) {
      this.$refs.Modal.init(
        null,
        record ? record.id : null,
        record && record.id
          ? record.permissionName + "  - 资源新增"
          : "添加资源"
      );
    },
    /**
     * 查询
     */
    getDataList(isResetPage) {
      this.tableLoading = true;
      const params = this.getQueryParams(isResetPage); // 查询条件
      this.$request.getRequest1(this.api.dataList, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records;
          this.ipagination.total = res.result.total;
          this.dataSource.forEach((x) => {
            if (x.permissionType === 0) {
              x.children = [];
            }
          });
        }
        this.tableLoading = false;
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.ant-form-item {
  margin-bottom: 0 !important;
}
</style>